<template>
  <wd-tabbar
    custom-class="tabbar-custom"
    fixed
    v-model="tabbarStore.curIdx"
    bordered
    safeAreaInsetBottom
    placeholder
    @change="selectTabBar"
  >
    <block v-for="(item, idx) in tabbarList" :key="item.path">
      <wd-tabbar-item v-if="item.bulge" icon="cart">
        <template #icon>
          <view
            class="center bg-#fff h-[100rpx] w-[100rpx] rounded-full mt-[-50rpx]"
          >
            <image
              class="h-[100rpx] w-[100rpx] rounded-full"
              :src="basicInfo?.coverImage"
              mode="scaleToFill"
            />
          </view>
        </template>
      </wd-tabbar-item>
      <wd-tabbar-item v-else :title="item.text" :icon="item.icon" />
    </block>
  </wd-tabbar>

  <get-phone v-if="isShowPhone" @hide-phone="hidePhone" />
</template>

<script setup lang="ts">
import { httpGetBasicInfoDetail } from "@/service/home";
import { tabBar } from "@/pages.json";
import { useUserStore } from "@/store";
import { tabbarStore } from "./tabbar";
const userStore = useUserStore();
const basicInfo = ref<any>();

const isShowPhone = ref<boolean>(false);
const tabbarList = tabBar.list.map((item) => ({
  ...item,
  path: `/${item.pagePath}`,
}));
const num = ref<number>(0);
const hidePhone = () => {
  isShowPhone.value = false;
};
function selectTabBar({ value: index }: { value: number }) {
  const url = tabbarList[index].path;
  tabbarStore.setCurIdx(index);
  uni.switchTab({ url });
}

const getBasicInfoDetail = async () => {
  try {
    const res = await httpGetBasicInfoDetail({ id: 1 });
    basicInfo.value = res.data;
  } catch (error) {
    console.log(error, "error");
  }
};

onMounted(() => {
  getBasicInfoDetail();
});
</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>
<style lang="scss">
:deep(.tabbar-custom) {
  padding-bottom: calc(env(safe-area-inset-bottom)) !important;
  height: 120rpx !important;
  box-shadow: 0 -80rpx rgba(0, 0, 0, 0);
  &::after {
    height: 0 !important;
  }
}
.fg-add-bottom {
  bottom: calc(10rpx + env(safe-area-inset-bottom)) !important;
}
.tabbar-bulge {
  color: #000 !important;
}
</style>
